// src/web/static/js/add_video.js
const { createApp } = Vue;

createApp({
  data() {
    return {
      formData: {
        url: '',
        title: '',
        carBrand: ''
      },
      responseMessage: '',
      success: false,
      isLoading: false
    };
  },
  methods: {
    async submitVideo() {
      this.isLoading = true;
      this.responseMessage = '';
      this.success = false;

      try {
        const res = await fetch('http://localhost:5000/api/video', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            video_url: this.formData.url,
            title: this.formData.title,
            car_brand: this.formData.carBrand
          })
        });

        // 只有 2xx 状态码才是成功
        if (!res.ok) {
          const errorData = await res.json();
          throw new Error(errorData.error || `HTTP 错误: ${res.status}`);
        }

        const result = await res.json();
        this.responseMessage = result.message || '✅ 视频提交成功';
        this.success = true;
      } catch (error) {
        this.responseMessage = `❌ 提交失败: ${error.message}`;
        this.success = false;
        console.error(error);
      } finally {
        this.isLoading = false;
      }
    }
  }
}).mount('#app');